<!--
 * @Author: g05047
 * @Date: 2023-03-30 10:51:07
 * @LastEditors: g05047
 * @LastEditTime: 2023-03-30 10:51:25
 * @Description: file content
-->
<template>
    <div class="content">
      <!-- 查询-->
      <el-row style="margin-bottom: 15px" :gutter="10">
        <el-col :span="3">
          <el-select v-model="queryParams.areaCode" placeholder="区域范围">
            <el-option
              v-for="item in areaList"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select
            style="width:100%"
            v-model="queryParams.remarks"
            placeholder="主体责任类型"
            collapse-tags
            multiple
            clearable
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in [
                {
                  label: '大型餐饮服务企业',
                  value: '大型餐饮服务企业',
                },
                {
                  label: '中型餐饮服务企业',
                  value: '中型餐饮服务企业',
                },
                {
                  label: '大型食品销售企业',
                  value: '大型食品销售企业',
                },
                {
                  label: '中型食品销售企业',
                  value: '中型食品销售企业',
                },
                {
                  label: '托幼机构食堂(用餐人数300以上)',
                  value: '托幼机构食堂(用餐人数300以上)',
                },
                {
                  label: '学校食堂(用餐人数500以上)',
                  value: '学校食堂(用餐人数500以上)',
                },
                {
                  label: '其他学校食堂（含托幼机构，需总监）',
                  value: '其他学校食堂（含托幼机构，需总监）',
                },
  
                {
                  label: '用餐（供餐）1000人以上的单位',
                  value: '用餐（供餐）1000人以上的单位',
                },
                {
                  label: '网络平台（需设置总监）',
                  value: '网络平台（需设置总监）',
                },
  
                {
                  label: '食用农产品批发市场',
                  value: '食用农产品批发市场',
                },
                {
                  label: '其他企业(无需设置总监)',
                  value: '其他企业(无需设置总监)',
                },  {
                  label: '未设置主体责任',
                  value: '未设置主体责任',
                },
                {
                  label: '其他企业(无需设置总监)(仅限市平台单位)',
                  value: '其他企业(无需设置总监)(仅限市平台单位)',
                },
  
                
              ]"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="queryParams.bodyindustry"
            placeholder="主体业态"
            collapse-tags
            multiple
            clearable
          >
            <el-option
              label="食品销售经营者"
              :value="'食品销售经营者'"
            ></el-option>
            <el-option
              label="餐饮服务经营者"
              :value="'餐饮服务经营者'"
            ></el-option>
            <el-option label="集中用餐单位食堂" :value="'集中用餐单位食堂'"></el-option>
            <el-option
              label="食品流通经营者"
              :value="'食品流通经营者'"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="1.5" style="margin-left: 30px">
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
  
      <!-- 表格数据 -->
      <el-table border :data="tableData" style="width: 100%" class="exportTb">
        <el-table-column
          fixed
          align="center"
          prop="areaName"
          label="地区"
          width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column align="center" label="A" show-overflow-tooltip>
            <el-table-column
              align="center"
              prop="passRestaurant"
              label="已考核"
              show-overflow-tooltip
              width="100"
            >
             <template slot-scope="scope">
                <div class="prompt" v-disabled @click="statistics(14, scope,'A')">
                  {{ scope.row.totalA }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="failedRestaurant"
              label="未考核"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="scope">
                <el-tag type="warning">
                  
                          <div class="prompt" v-disabled @click="statistics(141, scope,'A')">
                    {{ scope.row.notTotalA }}
                  </div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="passRestaurantRate"
              label="百分比"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span> {{ scope.row.totalRateA }}% </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="B" show-overflow-tooltip>
            <el-table-column
              align="center"
              prop="passRestaurant"
              label="已考核"
              show-overflow-tooltip
              width="100"
            >
             <template slot-scope="scope">
                <div class="prompt" v-disabled @click="statistics(14, scope,'B')">
                  {{ scope.row.totalB }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="failedRestaurant"
              label="未考核"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="scope">
                <el-tag type="warning">
                  
                          <div class="prompt" v-disabled @click="statistics(141, scope,'B')">
                    {{ scope.row.notTotalB }}
                  </div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="百分比"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span> {{ scope.row.totalRateB }}% </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="C" show-overflow-tooltip>
            <el-table-column
              align="center"
              label="已考核"
              show-overflow-tooltip
              width="100"
            >
             <template slot-scope="scope">
                <div class="prompt" v-disabled @click="statistics(14, scope,'C')">
                  {{ scope.row.totalC }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="未考核"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="scope">
                <el-tag type="warning">
                  
                          <div class="prompt" v-disabled @click="statistics(141, scope,'C')">
                    {{ scope.row.notTotalC }}
                  </div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="百分比"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span> {{ scope.row.totalRateC }}% </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="D" show-overflow-tooltip>
            <el-table-column
              align="center"
              label="已考核"
              show-overflow-tooltip
              width="100"
            >
             <template slot-scope="scope">
                <div class="prompt" v-disabled @click="statistics(14, scope,'D')">
                  {{ scope.row.totalD }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="未考核"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="scope">
                <el-tag type="warning">
                  
                          <div class="prompt" v-disabled @click="statistics(141, scope,'D')">
                    {{ scope.row.notTotalD }}
                  </div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="百分比"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span> {{ scope.row.totalRateD }}% </span>
              </template>
            </el-table-column>
          </el-table-column>



          <el-table-column align="center" label="合计" show-overflow-tooltip>
            <el-table-column
              align="center"
              label="已考核"
              show-overflow-tooltip
              width="100"
            >
             <template slot-scope="scope">
                <div class="prompt" v-disabled @click="statistics(14, scope,'')">
                  {{ scope.row.total }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="未考核"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="scope">
                <el-tag type="warning">
                  
                          <div class="prompt" v-disabled @click="statistics(141, scope,'')">
                    {{ scope.row.notTotal }}
                  </div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="百分比"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span> {{ scope.row.totalRate }}% </span>
              </template>
            </el-table-column>
          </el-table-column>
      </el-table>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
        <!-- 查询-->
  
        <el-row  :gutter="10">
            <el-col :span="3">
          <!-- <el-select disabled v-model="query.areaCode" placeholder="区域范围">
            <el-option
              v-for="item in areaList"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
            >
            </el-option>
          </el-select> -->
          <el-input
              clearable
              maxlength="50"
              disabled
              v-model="query.areaName"
            ></el-input>
        </el-col>
   <el-col :span="6">
          <el-select
            style="width: 100%"
            v-model="query.remarks"
            placeholder="主体责任类型"
            collapse-tags
            multiple
            clearable
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in [
                {
                  label: '大型餐饮服务企业',
                  value: '大型餐饮服务企业',
                },
                {
                  label: '中型餐饮服务企业',
                  value: '中型餐饮服务企业',
                },
                {
                  label: '大型食品销售企业',
                  value: '大型食品销售企业',
                },
                {
                  label: '中型食品销售企业',
                  value: '中型食品销售企业',
                },
                {
                  label: '托幼机构食堂(用餐人数300以上)',
                  value: '托幼机构食堂(用餐人数300以上)',
                },
                {
                  label: '学校食堂(用餐人数500以上)',
                  value: '学校食堂(用餐人数500以上)',
                },
                {
                  label: '其他学校食堂（含托幼机构，需总监）',
                  value: '其他学校食堂（含托幼机构，需总监）',
                },
  
                {
                  label: '用餐（供餐）1000人以上的单位',
                  value: '用餐（供餐）1000人以上的单位',
                },
                {
                  label: '网络平台（需设置总监）',
                  value: '网络平台（需设置总监）',
                },
  
                {
                  label: '食用农产品批发市场',
                  value: '食用农产品批发市场',
                },
                {
                  label: '其他企业(无需设置总监)',
                  value: '其他企业(无需设置总监)',
                }, {
                  label: '未设置主体责任',
                  value: '未设置主体责任',
                },
                {
                  label: '其他企业(无需设置总监)(仅限市平台单位)',
                  value: '其他企业(无需设置总监)(仅限市平台单位)',
                },
              ]"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-col>
         <el-col :span="5">
          <el-select
            v-model="query.bodyindustry"
            placeholder="主体业态"
            collapse-tags
            multiple
            clearable
          >
            <el-option
              label="食品销售经营者"
              :value="'食品销售经营者'"
            ></el-option>
            <el-option
              label="餐饮服务经营者"
              :value="'餐饮服务经营者'"
            ></el-option>
            <el-option label="集中用餐单位食堂" :value="'集中用餐单位食堂'"></el-option>
            <el-option
              label="食品流通经营者"
              :value="'食品流通经营者'"
            ></el-option>
          </el-select>
        </el-col>
        </el-row>
  <rz-height></rz-height>
  
        <el-row  :gutter="10">
          <el-col :span="6">
            <el-input
              clearable
              maxlength="50"
              v-model="query.identify"
              placeholder="请输入统一社会信用代码"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              clearable
              maxlength="50"
              v-model="query.newLicenseNo"
              placeholder="请输入许可证号"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              clearable
              maxlength="50"
              v-model="query.operatorName"
              placeholder="请输入单位名称"
            ></el-input>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handleList">查询</el-button>
          </el-col>
            <el-col :span="1.5">
            <el-button  @click="exportAnalyzeBulletBoxes">导出</el-button>
          </el-col>
        </el-row>
  <rz-height></rz-height>
  
    <el-table
              border
              :data="list"
              style="width: 100%"
              stripe
            >
              <el-table-column label="地区" prop="districtStreet" width="120">
  
                 <template slot-scope="scope">
                  <div>{{ scope.row.streetName || scope.row.districtName }}</div></template
                >
              </el-table-column>
              <el-table-column
                label="经营者名称"
                prop="operatorName"
              ></el-table-column>
              <el-table-column
                width="200"
                label="统一社会信用代码"
                prop="identify"
              ></el-table-column>
  
              <el-table-column label="许可证编号" width="150" prop="newLicenseNo">
                <template slot-scope="scope">
                  <div>{{ scope.row.newLicenseNo || "--" }}</div></template
                ></el-table-column
              > <el-table-column
                label="单位地址"
                prop="productionAddress"
              ></el-table-column>
  
  
  
  
  
    <el-table-column
       v-if="query.typesOf==61||query.typesOf==71"
                label="签署安全员"
                prop="contactor"  width="150"
              >
               <template slot-scope="scope">
                  <div>{{ scope.row.contactor || "--" }}</div></template
                >
              </el-table-column>
  
              <el-table-column
              v-else
                label="联系人"
                prop="contactor"  width="150"
              >
               <template slot-scope="scope">
                  <div>{{ scope.row.contactor || "--" }}</div></template
                >
              </el-table-column>
              <el-table-column
                label="联系方式"
                prop="contactTel"  width="150"
              >
               <template slot-scope="scope">
                  <div>{{ scope.row.contactTel || "--" }}</div></template
                >
              </el-table-column>
              <el-table-column
                label="风险等级"
                prop="riskLevel"  width="90"
              >
              </el-table-column>
              
            </el-table>
            <pagination
              :total="total"
              :page.sync="query.pageIndex"
              @pagination="handleList()"
              v-show="total"
            />
  <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import {
    findRisksLevelStatistics,
    analyzeBulletBoxes,
    exportAnalyzeBulletBoxes
  } from "@/api/modules/enterprise";
  import { exportTb } from "@/utils/XLSX";
  export default {
    name:"statisticalAnalysisAtSupervise",
    props: [],
    data() {
      return {
        areaCode: this.$areaCode,
        areaList: [],
        queryParams: {
          areaCode: '8E543E8F907E4499B6D2BA2DFC63A862',
          bodyindustry: [],
          labelName: "",
          remarks: [
            "大型餐饮服务企业",
            "中型餐饮服务企业",
            "大型食品销售企业",
            "中型食品销售企业",
            "托幼机构食堂(用餐人数300以上)",
            "学校食堂(用餐人数500以上)",
            "其他学校食堂（含托幼机构，需总监）",
            "用餐（供餐）1000人以上的单位",
            "网络平台（需设置总监）",
            "食用农产品批发市场",
            "其他企业(无需设置总监)",
            "未设置主体责任"
          ],
        },
        query: {
          areaCode: "",
          bodyindustry: [],
          identify: "",
          labelName: "",
          newLicenseNo: "",
          operatorName: "",
          pageIndex: 1,
          pageSize: 10,
          remarks: [],
          typesOf: "",
          areaName:"",
          state:''
        },
        tableData: [],
        dialogVisible: false,
        list: [],
        total:0,
        title:''
      };
    },
    //页面加载
    created() {
      // if (this.$route.query.code) {
      //   this.areaCode = this.$route.query.code;
      // } else {
      //   this.areaCode = "320500";
      // }
      // this.queryParams.areaCode = this.areaCode;
   
      this.findListByParentCode();
      this.getList(this.queryParams);
    }, // 页面加载完成
    mounted() {}, //实例销毁之前
    beforeDestroy() {}, //实例销毁后
    destroyed() {},
    methods: {
      //获取区域列表
      findListByParentCode() {
        this.$http
          .findListByParentCodeA({
            parentCode:"8E543E8F907E4499B6D2BA2DFC63A862",
          })
          .then((res) => {
            this.areaList = res.data;
          });
      },
  
      handleQuery() {
        this.getList(this.queryParams);
      },
      handleExport() {
        exportTb(".exportTb", `导出${this.$moment().format("YYYYMMDD_HHmmss")}`);
      },
  
      //查询列表
      async getList(params) {
        try {
   this.tableData = [];
          const res = await findRisksLevelStatistics(params);
          this.tableData = res.data;
        } catch (err) {
          console.log(err);
        }
      },
      statistics(typesOf, scope,label) {
        this.title='风险等级'+label+scope.column.label+'单位列表'
        this.query.typesOf=typesOf+''
        this.query.state=label
        this.query.areaCode=scope.row.areaCode=='合计'?this.queryParams.areaCode:scope.row.areaCode
        this.query.areaName=scope.row.areaCode=='合计'?'合计':scope.row.areaName
        this.query.identify=""
        this.query.newLicenseNo=""
        this.query.operatorName=""
        this.query.bodyindustry=this.queryParams.bodyindustry
        this.query.remarks=this.queryParams.remarks
  
        if(this.queryParams.areaCode=='100'){
            if(this.query.areaCode!='100'){
                this.query.areaName='合计'
            }
        }
  
  
          this.handleList()
        this.dialogVisible = true;
      },
     async handleList() {
       const {data} = await   analyzeBulletBoxes(this.query)
       this.list=data.list
       this.total=data.total
      },
      exportAnalyzeBulletBoxes(){
         exportAnalyzeBulletBoxes({
          ...this.query,
          bodyindustry: this.query.bodyindustry.join(","),
          remarks: this.query.remarks.join(","),
        }).then((res) => {
          // this.$downloadFiles(res.data);
           var blob = new Blob([res], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "导出" + new Date().getTime() + ".xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        });
      }
    }, //方法
    watch: {}, //监听属性
    components: {}, //组件
    computed: {}, //计算属性
  };
  </script>
  <style lang="scss" scoped>
  .content{
    padding: 20px;
  }
  .prompt {
    text-decoration: underline;
    color: #409eff;
    cursor: pointer;
  }
  </style>
  